<template>
  <div class="search-container">
    <!-- 搜索 -->
    <div class="search-bar">
      <van-icon class="back" name="arrow-left" size="20" @click="$router.back()"/>
      <van-search v-model="listView.params.goodsName" @focus="$router.push('/searchChoose')" class="search-box" placeholder="请输入搜索关键词" />
      <van-icon class="show-style" color="#e9b461" :name="listTypeIcon" size="25" @click="changeListType"/>
    </div>
    <!-- 条件 -->
    <div class="condition-box">
      <div class="condition circle-bg">
        <van-row>
          <!-- <van-col class="item" span="7">
            <van-dropdown-menu>
              <van-dropdown-item v-model="normalFilterSelect" :options="normalFilterList" />
            </van-dropdown-menu>
          </van-col> -->
          <van-col class="item" span="7">
            <van-button @click="conditionSort(0)" :class="activeIndex == 0 ? 'active' : ''">
              <div slot="default" class="filter">
                <span class="text">综合排序</span>
              </div>
            </van-button>
          </van-col>
          <van-col class="item" span="5">
            <van-button @click="conditionSort(1)" :class="activeIndex == 1 ? 'active' : ''">
              <div slot="default" class="filter">
                <span class="text">销量</span>
                <div class="icon">
                  <img class="up" :src="activeIndex == 1 && activeDirection == 'asc' ? 'imgs/up_sel.png' : 'imgs/up.png'" alt=""/>
                  <img class="down" :src="activeIndex == 1 && activeDirection == 'desc' ? 'imgs/down_sel.png' : 'imgs/down.png'" alt=""/>
                </div>
              </div>
            </van-button>
          </van-col>
          <van-col class="item" span="5">
            <van-button @click="conditionSort(2)" :class="activeIndex == 2 ? 'active' : ''">
              <div slot="default" class="filter">
                <span class="text">价格</span>
                <div class="icon">
                  <img class="up" :src="activeIndex == 2 && activeDirection == 'asc' ? 'imgs/up_sel.png' : 'imgs/up.png'" alt=""/>
                  <img class="down" :src="activeIndex == 2 && activeDirection == 'desc' ? 'imgs/down_sel.png' : 'imgs/down.png'" alt=""/>
                </div>
              </div>
            </van-button>
          </van-col>
          <van-col class="item" span="7">
            <van-button @click="advanceFilterShow = true">高级筛选</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <!-- 高级搜索 -->
    <van-popup v-model="advanceFilterShow" :closeable="true" close-icon-position="top-left" :close-on-popstate="true" position="right" :style="{ height: '100%',width: '70%' }">
      <div class="filter-box">

      </div>
    </van-popup>
    <!-- 商品列表 -->
    <van-list
      :immediate-check="listView.immediateCheck"
      v-model="listView.loading"
      :finished="listView.finished"
      finished-text="没有更多了"
      @load="loadGoodsList">
      <van-grid v-if="listType == '0'" :column-num="2" class="goods-box" :border="false">
        <van-grid-item class="goods" v-for="(goods, index) in listView.list" :key="index">
          <div slot="default">
            <goodsItem :detail="goods"></goodsItem>
          </div>
        </van-grid-item>
      </van-grid>
      <div v-if="listType == '1'" class="goods-horizontal-box">
        <horizontalGoodsItem :detail="goods" v-for="(goods, index) in listView.list" :key="index"></horizontalGoodsItem>
      </div>
    </van-list>
    <!-- 回到顶部 -->
    <vueToTop bottom="80" type="3" size="30"></vueToTop>
    <!-- 页码 -->
    <div class="page-box">
      <span class="page-num">{{listView.params.pageNo-1}}</span>
      <span class="page-divider"></span>
      <span class="page-total">{{listView.totalPage}}</span>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import constants from '@/config/constants'
import goodsItem from '@/components/goods/goodsItem';
import horizontalGoodsItem from '@/components/goods/horizontalGoodsItem';

import goodsApi from '@/api/goodsApi'
import utils from '@/utils/utils'

export default {
  components: {
    goodsItem,
    horizontalGoodsItem
  },
  name: 'search',
  data () {
    return {
      /* 默认综合排序：0综合 1销量 2价格 */
      activeIndex: 0,

      /* 排序方向：desc降序 asc升序 */
      activeDirection: 'desc',

      /* 列表展现方式：0宫格 1列表 */
      listType: '0',
      listTypeIcon: 'coupon-o',

      /* 高级筛选 */
      advanceFilterShow: false,

      /* 综合排序选项 */
      normalFilterSelect: 0,
      normalFilterList: [
        { text: '综合排序', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],

      /* 商品列表 */
      listView: {
        params: {
          goodsName: '',
          sortDirection: '',
          sortKeyword: '',
          pageNo: 1,
          pageSize: 10
        },
        immediateCheck: false,
        loading: false,
        finished: false,
        list: [],
        totalPage: 0,
      }
    }
  },
  computed: {
    ...mapState(['searchKeyword'])
  },
  watch: {
    /* 监听搜索关键字，刷新列表 */
    searchKeyword (newVal, oldVal){
      this.activeIndex = 0;
      this.listView.params.sortDirection = '';
      this.listView.params.sortKeyword = '';
      this.listView.params.goodsName = newVal;
      this.resetList();
    }
  },
  activated () {
    /* 缓存优化体验 */
    if(!this.$route.meta.useCache){
      this.resetList();
    }
  },
  beforeRouteLeave(to, from, next) {
    /* 前往商品详情页面、搜索页面才启用缓存 */
    if(to.name == 'goodsDetail' || to.name == 'searchChoose'){
      from.meta.useCache = true;
    }else{
      from.meta.useCache = false;
      if(this.$route.query.goodsName){
        this.listView.params.goodsName = this.$route.query.goodsName;
      }
    }
    next();
  },
  methods: {
    /* 刷新列表 */
    resetList () {
      this.listView.params.pageNo = 1;
      this.listView.params.pageSize = 10;
      this.listView.loading = false;
      this.listView.finished = false;
      this.listView.list = [];
      this.loadGoodsList();
    },
    /* 获取推荐商品列表 */
    loadGoodsList() {
      goodsApi.goodsList(this.listView.params).then(result => {
				if(result.code == constants.SUCCESS){
					utils.pageResultHandle(this.listView, result.data);
					this.listView.totalPage = result.data.totalPage;
				}
      })
    },
    /* 切换列表展现方式 */
    changeListType () {
      this.listType = this.listType == '0' ? '1' : '0';
      this.listTypeIcon = this.listTypeIcon == 'apps-o' ? 'coupon-o' : 'apps-o';
    },
    /* 选中筛选方式 */
    conditionSort (index) {
      if(this.activeIndex == index && index == 0){
        return;
      }
      this.activeIndex = index;
      if(index != 0){
        this.activeDirection = this.activeDirection == 'desc' ? 'asc' : 'desc';
        if(index == 1){
          this.listView.params.sortDirection = this.activeDirection;
          this.listView.params.sortKeyword = 'saleCount';
        }else{
          this.listView.params.sortDirection = this.activeDirection;
          this.listView.params.sortKeyword = 'price';
        }
      }else{
        this.listView.params.sortDirection = '';
        this.listView.params.sortKeyword = '';
      }
      //刷新数据
      this.resetList();
    }
  }
}
</script>

<style lang="scss">
.van-overflow-hidden{
  /deep/ .condition{
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}
.search-container{
  padding-top: 95px;
  .search-bar{
    background-color: #fff;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 55px;
    width: 100%;
    z-index: 2;
    display: flex;
    align-items: center;
    .back{
      margin-left: 10px;
      color: #333;
    }
    .search-box{
      flex: 1;
      .van-search__content{
        border-radius: 5px;
      }
    }
    .show-style{
      margin-right: 10px;
      color: #333;
    }
  }
  .condition-box{
    background: #f2f2f2;
    position: fixed !important;
    top: 55px !important;
    left: 0 !important;
    width: 375px;
    height: 50px;
    padding-top: 8px;
    z-index: 2;
    .condition{
      background-color: #fff;
      width: 355px;
      padding: 0;
      /deep/ .van-dropdown-menu{
        .van-dropdown-item{
          margin: 0 10px;
          .van-overlay{
            background-color: rgba(0,0,0,.1);
          }
        }
        .van-dropdown-menu__bar{
          height: 44px;
          box-shadow: none;
        }
        /deep/ .van-dropdown-menu__title{
          padding: 0 6px;
          font-size: 14px;
        }
        /deep/ .van-dropdown-menu__item{
          justify-content: flex-start;
        }
      }
      .item{
        display: flex;
        justify-content: center;
        .van-button {
          background: #fff !important;
          border: none;
          span{
            color: #333 !important;
          }
        }
        .van-button.active{
          span{
            color: #e9b461 !important;
          }
        }
        .filter{
          display: flex;
          align-items: center;
          .text{
            margin-right: 3px;
          }
          .icon{
            display: flex;
            flex-direction: column;
            justify-content: center;
            img{
              width: 10px;
              height: 10px;
            }
            .up{
              position: relative;
              top: 1px;
            }
            .down{
              position: relative;
              top: -1px;
            }
          }
        }
      }
    }
  }
  .goods-box{
    margin-top: 15px;
  }
  .goods-horizontal-box{
    margin-top: 20px;
  }
  .filter-box{
    margin-top: 40px;
  }
}
.page-box{
  position: fixed;
  bottom: 30px;
  right: 25px;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  border: 1px solid #666;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  .page-num{
    font-size: 12px;
  }
  .page-divider{
    height: 1px;
    width: 20px;
    background: #666;
    margin: 2px 0px;
  }
  .page-total{
    font-size: 12px;
  }
}
</style>
